<!DOCTYPE html>
<html>

<head>
    <title>Canvas Smear Mask Example</title>
    <style>
        body {
            position: relative;
            margin: 0;
            padding: 0;
        }
        #controls {
            position: absolute;
            left: 10px;
            top: 10px;
            z-index: 10;
        }
        canvas {
            border: 1px solid black;
            cursor: crosshair;
            display: block; /* 避免出现滚动条 */
            margin: 0 auto; /* 水平居中画布 */
            position: relative; /* 相对定位使其能够正确计算offsetLeft和offsetTop值 */
            top: 20px; /* 按钮高度+间距 */
        }
    </style>
    <script>
        window.onload = function () {
            var canvas = document.getElementById('smear-canvas');
            var ctx = canvas.getContext('2d');
            var mouseDown = false;

            // 设置canvas的尺寸，与待涂抹的原图尺寸一致
            canvas.width = 1000;
            canvas.height = 1000;

            // 加载一个图片作为背景
            var image = new Image();
            image.onload = function () {
                ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
            }
            image.src = '女侧119K.JPG'; // 你的图片路径

            // 当鼠标在canvas上按下时开始涂抹
            canvas.addEventListener('mousedown', function (e) {
                mouseDown = true;
                ctx.globalCompositeOperation = 'destination-out'; // 设置涂抹后显示下面的内容
            });

            // 当鼠标在canvas上移动时，如果是按下状态，则涂抹
            canvas.addEventListener('mousemove', function (e) {
                if (mouseDown) {
                    var x = e.pageX - canvas.offsetLeft;
                    var y = e.pageY - canvas.offsetTop;
                    ctx.beginPath();
                    ctx.arc(x, y, 10, 0, Math.PI * 2, false); // 绘制涂抹的圆形
                    ctx.fill();
                }
            });

            // 当鼠标释放或离开canvas时，停止涂抹
            canvas.addEventListener('mouseup', function () {
                mouseDown = false;
            });
            canvas.addEventListener('mouseleave', function () {
                mouseDown = false;
            });
            // 添加保存画布内容到本地的功能
            var saveButton = document.getElementById('saveButton');
            saveButton.addEventListener('click', function () {
                var dataURL = canvas.toDataURL('image/png');
                var link = document.createElement('a');
                link.download = '标注结果.png';
                link.href = dataURL;
                link.click();
            });
        };
    </script>
</head>

<body>
    <div id="controls">
        <button id="saveButton">保存到本地</button>
    </div>
    <canvas id="smear-canvas"></canvas>
</body>

</html>